<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>插入式聊天专家</title>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.2/socket.io.min.js"></script>
    <style>
        .shutdown{
            position: absolute;
            background-color: black;
            width: 100vw;
            height: 100vh;
        }
    </style>
<body style="background-color: white;">
    <div id="app">
        <div class="shutdown" v-show='isBlock' @click='blockPage'></div>
        <el-container v-show='!isBlock'>
            <el-header>插入式聊天专家</el-header>
            <el-main>
                <div id="showDiv">
                    <p>
                        <a target="_blank" href="intro.html">强烈升级！！现已支持油猴脚本，一键插入，不用担心手忙脚乱，注意此链接会打开新页面，重要时刻请勿点击！！！]</a>
                    </p>
                    <p>
                        <h1>祝大家顺利，我先睡觉了。~</h1>
                    </p>
                    
                </div>
            </el-main>
            <el-footer >
                <el-input @keyup.enter.native="send(content);content=''" id="xx_input" placeholder="请输入内容" v-model="content" class="input-with-select">
                    <el-button  slot="append" @click="send(content);content=''">发送</el-button>
                </el-input>
                <div style="display: flex;margin: 0px;flex-wrap: wrap;justify-content: center;align-items: center;">
                    <el-button @click="blockPage" style="margin:0px;" size="mini" >紧急避险</el-button>
                    <el-button @click="send('救救我！')" style="margin:0px;" size="mini" >救救我</el-button>
                    <el-button @click="send('帮我看看。')" style="margin:0px;" size="mini" >帮我看看</el-button>
                    <el-button @click="send('我准备交卷了。')" style="margin:0px;" size="mini" >我准备交卷</el-button>
                    <el-button @click="send(userName+ `在这里，祝福大家，新春快乐~ <img style='width:50%' src='fu.gif'/>`)" style="margin:0px;" size="mini" >祝福</el-button>
                </div>
                <el-button type="success" class="scrollBottom" @click="scrollBottom" style="margin:0px;" icon="el-icon-download" circle></el-button>
            </el-footer>
          </el-container>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content: '',
                select: '',
                webSocketUrl: '/exam',
                webSocket: null,
                userName: '匿名',
                pictostr: false,
                selectValue: '',
                options: [{
                    value: 'Shanghai',
                    label: '上海'
                }],
                isBlock: false
            },
            computed: {

            },
            watch: {
            },
            mounted() {
                this.getUserName()
                this.pasteEventListener()
                this.scrollListener()
            },
            updated() {

            },
            methods: {
                blockPage(){
                    this.isBlock = !this.isBlock
                },
                pasteEventListener(){
                    //粘贴获取截图
                    let xx_input = document.getElementById("xx_input")
                    xx_input.addEventListener('paste', (event) => {
                        let items = event.clipboardData && event.clipboardData.items
                        let file = null
                        if (items && items.length) {
                            // 检索剪切板items
                            for (let i = 0; i < items.length; i++) {
                                if (items[i].type.indexOf('image') !== -1) {
                                    file = items[i].getAsFile()
                                    // 此时file就是剪切板中的图片文件
                                    let pic_reader = new FileReader()
                                    // 解析成base64格式
                                    pic_reader.readAsDataURL(file)
                                    pic_reader.onload = ()=> { 
                                        // max-width:100%;
                                        if(!this.pictostr){
                                            this.content = `<p style="overflow: auto;"><img src="${pic_reader.result}" style=""/></p>`
                                        }else{
                                            this.content = `pictostr ${pic_reader.result}`
                                        }
                                        this.$message({
                                            message: '图片获取成功。',
                                            type: 'success'
                                        })
                                    }
                                    break
                                }
                            }
                        }
    
                    });
                },
                getUserName() {
                    this.$prompt('请输入您的名字', '提示', {
                        confirmButtonText: '确定',
                        showClose: false,
                        showCancelButton: false,
                        closeOnClickModal: false,
                        closeOnPressEscape: false
                    }).then(({ value }) => {
                        if(value == null) {
                            value = '陌生人-'+ new Date().getTime()
                        }
                        this.$message({
                          type: 'success',
                          message: '你的名字是: ' + value
                        })
                        this.userName = value
                        this.initWebScoket()
                    }).catch(() => {

                    });
                },
                initWebScoket() {
                    this.webSocket=io.connect(this.webSocketUrl)
                    //监听回复的消息
                    this.webSocket.on('response',(data) => {
                        console.log(data.msg)
                        if(data.msg=="online") {
                            this.send("我在线。")
                        }else{
                            this.innerMessage(data.name, data.msg)
                        }
                    })
                    this.webSocket.emit('exam', { 'msg': this.userName + "进来了。", 'name': '系统'})
                },
                send(msg) {
                    let xx_table =`
                    <table border="1">
                        <tr>
                            <td>命名</td>
                            <td>功能</td>
                        </tr>
                        <tr>
                            <td>help</td>
                            <td>显示帮助菜单</td>
                        </tr>
                        <tr>
                            <td>pictostr</td>
                            <td>截图智能转换字符串并自动百度，当前状态：${this.pictostr?'开，您发的截图其他用户无法观看，由系统接管。':'关，图片是直接发送给所有在线的用户。'}</td>
                        </tr>
                        <tr>
                            <td>vip</td>
                            <td>第三方客服，2元一次帮忙查询，需要先支付，才能服务。【全部人都可以看到答案，使用一次，造福人类】</td>
                        </tr>
                    </table>
                    `
                    switch(msg) {
                        case 'help':
                            this.innerMessage("本地系统[其他人不可见]", `您好！需要帮助吗？<br>${xx_table}`)
                            return
                        case 'pictostr':
                            this.pictostr = !this.pictostr
                            this.innerMessage("本地系统[其他人不可见]", `转换成功！！~<br>粘贴截图模式已经变成了${this.pictostr?'截图智能转换字符串并自动百度，您发的截图其他用户无法观看，由系统接管。':'图片是直接发送给所有在线的用户。'}`)
                            return
                   } 
                    this.webSocket.emit('exam', { 'msg': msg, 'name': this.userName})
                },
                innerMessage(who, msg) {
                    let para1 = document.createElement("p")
                    para1.innerHTML = who + ':'
                    para1.className = 'name'
                    let para2 = document.createElement("p")
                    para2.innerHTML = msg
                    let div = document.getElementById("showDiv")
                    div.appendChild(para1)
                    div.appendChild(para2)
                },
                scrollBottom() {
                    this.$nextTick(() => {
                        document.getElementById("showDiv").scrollTop = document.getElementById("showDiv").scrollHeight
                        document.getElementsByClassName("scrollBottom")[0].style.display='none'
                    });
                },
                scrollListener() {
                    document.getElementById("showDiv").onscroll=function(e){
                        if(document.getElementById("showDiv").scrollTop == document.getElementById("showDiv").scrollHeight-document.getElementById("showDiv").offsetHeight){
                            document.getElementsByClassName("scrollBottom")[0].style.display='none'
                        }
                    }
                    setInterval(() => {
                        if(document.getElementById("showDiv").scrollHeight >this.height) {
                            console.log("来新消息了！")
                            document.getElementsByClassName("scrollBottom")[0].style.display='block'
                        }
                        this.height = document.getElementById("showDiv").scrollHeight
                    },500)

                }
            },
            
        })
    </script>
</body>
<style>
    .scrollBottom{
        position: fixed;
        bottom: 100px;
        right: 40px;
        font-size: 20px;
        display: none;
    }
    .el-message {
        min-width: 80% !important;
    }
    .el-message-box {
        width: auto !important;
    }
    .name {
        color: blue;
        font-size: 20px;
        font-family: fantasy;
    }
    #showDiv{
        overflow-y: scroll;
        overflow-x: hidden;
        height: calc(100vh - 145px);
        width: 100%;
    }
    .el-footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: auto !important;
        background-color: #B3C0D1;
        padding: 0 0px;
    }
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-main {
        padding: 0px;
        background-color: white;
        color: #333;
    }
    body {
        margin: 0px;
        padding: 0px;
    }
    *::-webkit-scrollbar {
    width: 5px;
    }
    *::-webkit-scrollbar-track {
    background: #f6f6f6;
    border-radius: 2px;
    }
    *::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 2px;
    }
    *::-webkit-scrollbar-thumb:hover {
    background: #747474;
    /* width: px;*/
    }
    *::-webkit-scrollbar-corner {
    background: #f6f6f6;
    }
</style>
</html>